<template>
  <div class="ivu-box">
    <Breadcrumb>
      <BreadcrumbItem>商品管理</BreadcrumbItem>
      <BreadcrumbItem>商品列表</BreadcrumbItem>
    </Breadcrumb>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <Input type="text" v-model="request.name" clearable placeholder="请输入商品名称" />
      </FormItem>
      <FormItem>
        <Input type="text" v-model="request.id" clearable placeholder="请输入商品ID" />
      </FormItem>
      <FormItem>
        <Input type="text" v-model="request.barcode" clearable placeholder="请输入商品条码" />
      </FormItem>
      <FormItem>
        <Button type="primary" @click="search" style="margin-right: 10px">搜索</Button>
        <Button type="primary" @click="search" style="margin-right: 10px">导出</Button>
      </FormItem>
    </Form>
    <Form ref="formInline" :model="request" inline>
      <FormItem>
        <label>我的商品库：</label><Button type="primary" @click="refresh" style="margin-right: 10px">刷新</Button>
        <Button type="primary" @click="add(defaultShopID)" style="margin-right: 10px">设置单独门店价格</Button>
      </FormItem>
    </Form>
    <Table :columns="columns1" :data="tableData"  :height="height" :loading="loading" >
        <template slot-scope="{ row }" slot="status">
          <span  class="success" v-if="row.status==='1'">启用中</span >
          <span class="error" v-if="row.status==='2'">已被禁用</span >
        </template>
        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="goodName">
          <span  style="color: #2db7f5;">{{row.name}}</span>
        </template>
        <template slot-scope="{ row }" slot="device">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
          <span v-else>{{row.user_device_count}}</span>
        </template>
        <!-- 商品图片 -->
        <template slot-scope="{ row }" slot="goodImg" align="center">
          <img
            :src="row.pic"
            @click="$preview(row.pic)"
            style="height: 100px;margin:0px auto"
          />
        </template>
         <!-- 价格 -->
         <template slot-scope="{ row }" slot="price">
            <Form ref="formInline" :model="requestPrice" inline>
              <FormItem>
                <label style="margin-right: 10px" v-if="editPriceButtonShow">{{ row.price }}</label>
                <Button type="primary"  size="small"  style="margin-right: 5px" @click="editPriceView(row.id)" v-if="editPriceButtonShow">修改</Button>
                <Input type="number"  :min="0" v-model="row.price" clearable placeholder= "" style="width: 100px; margin-right: 10px" v-if="row.id === editPriceRowId"/>
                <Button type="primary" @click="editPrice(row)" style="margin-right: 10px" v-if="row.id === editPriceRowId">确定</Button>
                <Button type="primary" @click="checkPriceView" style="margin-right: 10px" v-if="row.id === editPriceRowId">取消</Button>
              </FormItem>
            </Form>
          </template>
        <template slot-scope="{ row }" slot="option">
          <Button
            type="primary" size="small" style="margin-right: 5px" v-hasPermission="['37']" @click="addCheck(row.id)">查看</Button>
        </template>
      </Table>

    <div style="display: flex;justify-content: center;margin-top: 24px;">
      <Page :total="page.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total @on-change="handleCurrentChange" @on-page-size-change="handleSizeChange" />
    </div>
    <Modal v-model="modal3" title="设置角色" @on-ok="confirm2" @on-cancel="cancel2" :mask-closable="false">
      <Form :label-width="110">
        <FormItem label="当前角色">
          <Select  v-model="user.role_id" placeholder="请选择" style="width: 120px;">
            <Option  :value="item.id"  v-for="(item, index) in data1" :key="index">{{item.title}}</Option>
          </Select>
        </FormItem>
      </Form>
    </Modal>
    <Modal class="set-price" v-model="modal1" :title="form.id ? '编辑机器组' : '设置单独门店价格'" :loading="modalLoading" :mask-closable="false"  @on-cancel="onCloseSetting()"  width="1000">
        <Form ref="formShopGoods" :model="requestShopGoods" inline>
          <FormItem prop="shop_id">
            <Select clearable v-model="requestShopGoods.shop_id" placeholder="选择门店" style="width: 120px;" @on-change="handleShopChange">
              <Option :value="item.id" v-for="(item,index) in data1" :key="index">{{item.name}}</Option>
            </Select>
          </FormItem>
          <FormItem  prop="goods_name">
            <Input type="text" v-model="requestShopGoods.goods_name" clearable placeholder="请输入商品名称" />
          </FormItem>
          <FormItem>
            <Button type="primary" @click="searchShopGoods" style="margin-right: 10px">搜索</Button>
          </FormItem>
        </Form>
        <Table :columns="columns2" :data="tableData1" @on-selection-change="selectChange" :height="400" :loading="loading">
          <template slot-scope="{ row }" slot="status">
            <span  class="success" v-if="row.status==='1'">启用中</span >
            <span class="error" v-if="row.status==='2'">已被禁用</span >
          </template>
          <template slot-scope="{ row }" slot="user_count">
            <a href="javascript:void(0)" @click="viewSub(row)">{{row.user_count}}</a>
          </template>
          <!-- 机器组 -->
          <template slot-scope="{ row }" slot="group_count">
            <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!=0"><span  style="color: #2db7f5;">{{row.group_count}}</span></router-link>
            <span v-else>{{row.group_count}}</span>
          </template>
          <template slot-scope="{ row }" slot="user_device_count">
            <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
            <span v-else>{{row.user_device_count}}</span>
          </template>
          <!-- 机器 -->
          <template slot-scope="{ row }" slot="device_count" >
            <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!=0"><span  style="color: #2db7f5;">{{row.device_count}}</span></router-link>
            <span v-else>{{row.device_count}}</span>
          </template>
          <template slot-scope="{ row }" slot="shop_price">
            <Form ref="formInline" :model="request" inline>
              <FormItem>
                <label style="margin-right: 10px" v-if="editButtonShow">{{ row.shop_price }}</label>
                <Button type="primary"  size="small"  style="margin-right: 5px" @click="editView(row.id)" v-if="editButtonShow">修改</Button>
                <Input type="number"  :min="0" v-model="row.shop_price" clearable placeholder= "" style="width: 100px; margin-right: 10px" v-if="row.id === editRowId"/>
                <Button type="primary" @click="editShopPrice(row)" style="margin-right: 10px" v-if="row.id === editRowId">确定</Button>
                <Button type="primary" @click="checkView" style="margin-right: 10px" v-if="row.id === editRowId">取消</Button>
              </FormItem>
            </Form>
          </template>
        </Table>
        <div style="display: flex;justify-content: center;margin-top: 24px;">
       <Page :total="page1.count" :page-size="20" :page-size-opts="[20,30,40,50,100]" show-elevator show-sizer show-total @on-change="handleCurrentChangeShopGood" @on-page-size-change="handleSizeChangeShopGood" />
      </div>
       <div slot="footer">
            <Button type="primary"   @click="onCloseSetting()">取消</Button>
        </div>
      </Modal>
    <Modal class="set-price" v-model="modal4" :title="form.id ? '编辑机器组' : '详情查看'" :loading="modalLoading" :mask-closable="false"   width="1000">
      <Table class="goodDetails" :columns="columns3" :data="goodDetails" @on-selection-change="selectChange" :height="200" :loading="loading">
        <template slot-scope="{ row }" slot="status">
          <span  class="success" v-if="row.status==='1'">启用中</span >
          <span class="error" v-if="row.status==='2'">已被禁用</span >
        </template>
        <template slot-scope="{ row }" slot="user_count">
          <a href="javascript:void(0)" @click="viewSub(row)">{{row.user_count}}</a>
        </template>
        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="group_count">
          <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!=0"><span  style="color: #2db7f5;">{{row.group_count}}</span></router-link>
          <span v-else>{{row.group_count}}</span>
        </template>
        <template slot-scope="{ row }" slot="goods-count">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
          <span v-else>{{row.user_device_count}}</span>
        </template>
        <!-- 机器 -->
        <template slot-scope="{ row }" slot="goods-img" >
          <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!=0"><span  style="color: #2db7f5;">{{row.device_count}}</span></router-link>
          <span v-else>{{row.device_count}}</span>
        </template>
        <template slot-scope="{ row }" slot="shop-price">
          <Form ref="formInline" :model="request" inline>
            <FormItem>
              <label style="margin-right: 10px" v-if="buttonShow">12</label>
              <Button type="primary"  size="small"   style="margin-right: 5px" @click="editView" v-if="buttonShow">修改</Button>
               <Input type="number" v-model="request.shop_price" clearable placeholder="12" style="width: 50px; margin-right: 10px;width:300px" v-if="!buttonShow"/>
              <Button type="primary" @click="checkView" style="margin-right: 10px" v-if="!buttonShow">确定</Button>
              <Button type="primary" @click="checkView" style="margin-right: 10px" v-if="!buttonShow">取消</Button>
            </FormItem>
          </Form>
        </template>
        <template slot-scope="{ row }" slot="goodImg">
          <img
            :src="row.planogram"
            @click="$preview(row.pic)"
            style="height: 100px;margin:0px auto"
          />
        </template>
      </Table>
      <Form ref="formInline" :model="request" inline>
        <FormItem>
          <p>日志管理</p>
        </FormItem>
      </Form>
      <Table :columns="columns4" :data="tableData" @on-selection-change="selectChange" :height="200" :loading="loading">
        <template slot-scope="{ row }" slot="status">
          <span  class="success" v-if="row.status==='1'">启用中</span >
          <span class="error" v-if="row.status==='2'">已被禁用</span >
        </template>
        <template slot-scope="{ row }" slot="user_count">
          <a href="javascript:void(0)" @click="viewSub(row)">{{row.user_count}}</a>
        </template>
        <!-- 机器组 -->
        <template slot-scope="{ row }" slot="group_count">
          <router-link :to="'/team/index?manager_id='+row.id" v-if="row.group_count!=0"><span  style="color: #2db7f5;">{{row.group_count}}</span></router-link>
          <span v-else>{{row.group_count}}</span>
        </template>
        <template slot-scope="{ row }" slot="user_device_count">
          <router-link :to="'/operator/index?pid='+row.id" v-if="row.user_device_count!=0"><span  style="color: #2db7f5;">{{row.user_device_count}}</span></router-link>
          <span v-else>{{row.user_device_count}}</span>
        </template>
        <!-- 机器 -->
        <template slot-scope="{ row }" slot="device_count" >
          <router-link :to="'/equipment/index?manager_id='+row.id" v-if="row.device_count!=0"><span  style="color: #2db7f5;">{{row.device_count}}</span></router-link>
          <span v-else>{{row.device_count}}</span>
        </template>

      </Table>
        <div slot="footer">
            <Button type="primary"   @click="onCloseDetail">取消</Button>
        </div>
    </Modal>
    <Modal class="set-price" v-model="modal5" :title="'刷新提示'" :loading="modalLoading" :mask-closable="false" :closable="false" v-show="showModal">
      <p>{{ this.modal5Content }}</p>
      <template slot="footer">
        <Button type="primary"  size="small" style="margin-right: 5px" @click="showModal5">确定</Button>
      </template>
    </Modal>
  </div>
</template>

<script>
export default {
  data () {
    return {
      width: this.$store.state.width,
      height: this.$store.state.height,
      showDel: false, // 批量删除

      loading: false,

      showModal: false,

      // 商品价格调整
      editPriceRowId: 0,
      editPriceButtonShow: true,
      pricebuttonShow: true,
      // 门店商品价格调整
      editRowId: 0,
      editButtonShow: true,
      buttonShow: true,

      defaultShopID: 2,
      tableData1: [],
      request: {
        name: '',
        page: 1,
        loading: false,
        shopPrice: 0
      },
      requestShopGoods: {
        shop_id: '',
        goods_name: '',
        page: 1,
        loading: false,
        shopPrice: 0
      },
      codeImg: '',
      modal2: false,
      modal3: false,
      modal4: false,
      modal5: false,
      columns1: [
        {
          width: 60,
          align: 'center',
          type: 'selection'
        },
        {
          title: '商品ID',
          key: 'id',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '商品名称',
          key: 'name',
          minWidth: 250,
          align: 'center'
        },
        {
          title: '使用设备',
          key: '',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '商品图',
          slot: 'goodImg',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '商品编码',
          key: 'code',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '商品条码',
          key: 'barcode',
          width: '150',
          align: 'center'
        },
        // {
        //   title: '商品分类',
        //   slot: 'catetory',
        //   width: '150',
        //   align: 'center'
        // },
        {
          title: '门店统一售价',
          slot: 'price',
          minWidth: 300,
          align: 'center'
        },
        {
          title: '创建时间',
          key: 'create_time',
          width: '200',
          align: 'center'
        },
        {
          title: '操作',
          slot: 'option',
          minWidth: 100,
          align: 'center',
          fixed: 'right'
        }
      ],
      columns2: [
        {
          width: 60,
          align: 'center',
          type: 'selection'
        },
        {
          title: '商品ID',
          key: 'id',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '商品名称',
          key: 'goods_name',
          minWidth: 250,
          align: 'center'
        },
        {
          title: '门店统一价格',
          key: 'goods_price',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '门店单独价格',
          slot: 'shop_price',
          minWidth: 300,
          align: 'center'
        }
      ],
      columns3: [
        {
          title: '商品ID',
          key: 'id',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '商品名称',
          key: 'name',
          minWidth: 250,
          align: 'center'
        },
        {
          title: '占用列',
          key: 'username',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '货道可放置商品数',
          slot: 'goods-count',
          minWidth: 150,
          align: 'center'
        },
        {
          title: '商品陈列图',
          slot: 'goodImg',
          minWidth: 100,
          align: 'center'
        }
      ],
      columns4: [
        {
          title: '时间',
          key: 'title',
          minWidth: 100,
          align: 'center'
        },
        {
          title: '操作人员',
          key: 'email',
          minWidth: 250,
          align: 'center'
        },
        {
          title: '操作内容',
          key: 'username',
          minWidth: 150,
          align: 'center'
        }
      ],
      tableData: [],
      goodDetails: [],
      page: {},
      modalLoading: true,
      modal1: false,
      modal5Content: '刷新成功',
      form: {
        id: null
        // username: "",
        // email: ""
      },
      user: {
        id: '',
        role_id: ''
      },
      data1: [],
      page1: {},
      selectID: [],
      content: '权限1;权限2;权限3;权限4;权限5;权限6;权限7;权限8'
    }
  },
  created () {
    this.lists()
    this.getUserlist()
    console.log('----------------', this.buttonShow)
  },
  methods: {
    add (defaultShopID) {
      this.$refs.formShopGoods.resetFields()
      this.tableData1 = []
      this.page1 = {}
      this.cancel()
      this.editRowId = 0
      this.modal1 = true
    },
    showModal5 () {
      this.modal5 = false
      this.showModal = false
    },
    addCheck (paramID) {
      this.cancel()
      console.log('paramID', paramID)
      this.modal4 = true
      this.axios.post('goods/goods_detail', { goods_id: paramID }).then(res => {
        if (res.code === 1) {
          const resDataList = []
          resDataList.push(res.data)
          console.log('resDataList', resDataList)
          this.goodDetails = resDataList
          console.log('this.goodDetails', this.goodDetails)
        }
      })
    },
    refresh () {
      this.modal5 = true
      this.showModal = true
      this.axios.post('goods/refer_goods').then(res => {
        if (res.code === 1) {
          if (res.msg !== '刷新成功') {
            this.modal5Content = '刷新失败，请重试！'
            return
          }
          this.lists()
        } else {
          this.modal5Content = '刷新失败，请重试！'
        }
      })
    },
    editView (paramID) {
      this.editRowId = paramID
      this.editButtonShow = !this.editButtonShow
    },
    editPriceView (paramID) {
      this.editPriceRowId = paramID
      this.editPriceButtonShow = !this.editPriceButtonShow
    },
    checkPriceView () {
      this.editPriceRowId = 0
      this.editPriceButtonShow = !this.editPriceButtonShow
    },
    editPrice (row) {
      const goodsID = row.id
      const price = row.price
      this.axios.post('goods/set_price', { goods_id: goodsID, price: price }).then(res => {
        if (res.code === 1) {
          this.$Message.success('设置成功')
          this.editPriceButtonShow = true
          this.editPriceRowId = 0
          this.lists()
        }
      })
    },
    editShopPrice (row) {
      const shopGoodsID = row.id
      const shopPrice = row.shop_price
      this.axios.post('goods/set_shop_price', { shop_goods_id: shopGoodsID, shop_price: shopPrice }).then(res => {
        if (res.code === 1) {
          this.$Message.success('设置成功')
          this.editButtonShow = true
          this.editRowId = 0
          this.shop_goods_lists()
        }
      })
    },
    checkView () {
      this.editRowId = 0
      this.editButtonShow = !this.editButtonShow
    },
    selectChange (selection) {
      console.log('选项发生改变', selection)
      this.selectID = []
      selection.forEach(item => {
        this.selectID.push(item.id)
      })

      if (this.selectID.length > 0) {
        this.showDel = true
      } else {
        this.showDel = false
      }

      console.log(this.selectID)
    },

    edituser (row) {
      console.log(row)
      this.user.id = row.id
      this.user.role_id = row.role_id
      console.log(this.user)
      this.modal3 = true
    },
    confirm2 () {
      console.log(this.user)
      this.axios.post('account/setAccRole', this.user).then(res => {
        if (res.code === 1) {
          this.modal3 = false
          this.$Message.success('保存成功！')
          this.lists()
          this.cancel2()
        }
      })
    },
    cancel2 () {
      this.user = {
        id: '',
        role_id: ''
      }
    },
    getUserlist () { // 所有角色
      this.axios.post('goods/shop_list').then(res => {
        if (res.code === 1) {
          this.data1 = res.data
          console.log('res.data', res.data)
          const dataFirst = res.data[0]
          this.defaultShopID = dataFirst.id
          console.log('this.defaultShopID', this.defaultShopID)
        }
      })
    },

    viewSub (row) {
      console.log(row.id)
      this.$Message.success('id:', row.id)
      // this.$router.push('/master/index?account_id=' + row.id);
    },
    search () {
      this.request.page = 1
      this.lists()
    },
    handleSizeChange (val) {
      this.request.page = 1
      this.request.limit = val
      this.lists()
    },
    handleCurrentChange (val) {
      this.request.page = val
      this.lists()
    },
    lists () {
      this.loading = true
      this.axios.post('goods/goods_list', this.request).then(res => {
        if (res.code === 1) {
          this.loading = false
          this.tableData = res.data.list
          this.page.count = res.data.count // 总条数
          this.page.curPage = res.data.curPage // 当前页
          this.page.countPage = res.data.countPage // 总页数
          console.log('this.tableData', this.tableData)
        }
      })
    },

    // 门店商品列表
    handleShopChange (v) {
      this.requestShopGoods.shop_id = v
      this.shop_goods_lists()
    },
    searchShopGoods () {
      this.requestShopGoods.page = 1
      this.shop_goods_lists()
    },
    handleSizeChangeShopGood (val) {
      this.requestShopGoods.page = 1
      this.requestShopGoods.limit = val
      this.shop_goods_lists()
    },
    handleCurrentChangeShopGood (val) {
      this.requestShopGoods.page = val
      this.shop_goods_lists()
    },
    shop_goods_lists  () {
      if (this.requestShopGoods.shop_id === '') {
        this.$Message.info('请选择门店')
        return
      }
      this.loading = true
      this.axios.post('goods/shop_goods_list', this.requestShopGoods).then(res => {
        if (res.code === 1) {
          this.loading = false
          this.tableData1 = res.data.list
          this.page1.count = res.data.count // 总条数
          this.page1.curPage = res.data.curPage // 当前页
          this.page1.countPage = res.data.countPage // 总页数
          console.log('this.tableData1', this.tableData1)
        }
      })
    },
    edit (row) {
      console.log(row)
      this.form.id = row.id
      this.form.role_id = row.role_id
      this.form.username = row.username
      // this.form.email = row.email;
      this.modal1 = true
    },
    confirm () {
      this.axios.post('account/accEdit', this.form).then(res => {
        this.modalLoading = false
        if (res.code === 1) {
          this.modal1 = false
          this.$Message.success('保存成功！')
          this.lists()
          this.cancel()
        }
      })
    },
    onCloseSetting () {
      this.$refs.formShopGoods.resetFields()
      this.tableData1 = []
      this.page1 = {}
      this.editRowId = 0
      this.modal1 = false
    },
    onCloseDetail () {
      this.modal4 = false
    },
    remove (row) {
      this.selectID = []
      this.selectID.push(row.id)

      this.$Modal.confirm({
        title: '确定要删除账号:“' + row.username + '”吗？',
        onOk: () => {
          this.axios.post('account/delAccount', { id: this.selectID }).then(res => {
            if (res.code === 1) {
              this.$Message.success('删除成功')
              this.lists()
            }
          })
        },
        onCancel: () => {}
      })
    },
    setStatus (row) {
      var text = '确定要' + (row.status === 2 ? '启用' : '禁用') + '账号:“' + row.username + '”吗？'
      this.$Modal.confirm({
        title: text,
        onOk: () => {
          this.axios.post('account/accountStatus', { id: row.id, status: row.status === 1 ? 2 : 1 }).then(res => {
            if (res.code === 1) {
              this.$Message.success('操作成功')
              this.lists()
            }
          })
        },
        onCancel: () => {}
      })
    },
    cancel () {
      this.form = {
        id: null,
        username: '',
        email: ''
      }
    }
  }
}
</script>

<style scoped>
  .spec_item {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  .spec_item .input {
    width: 200px;
  }
  .spec_item button {
    margin-left: 10px;
  }
</style>
